import 'package:flutter/material.dart';
import 'package:flutter_deer/database/order_status.dart';
import 'package:flutter_deer/database/tables.dart';
import 'package:flutter_deer/generated/assets.dart';
import 'package:flutter_deer/res/colors.dart';
import 'package:flutter_deer/res/dimens.dart';
import 'package:flutter_deer/res/gaps.dart';
import 'package:flutter_deer/ui/cashier/provider/cashier_page_provider.dart';
import 'package:flutter_deer/util/device_utils.dart';
import 'package:flutter_deer/util/input_formatter/mny_format.dart';
import 'package:flutter_deer/widgets/load_image.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';

class CashierOilItemLeft extends StatelessWidget {
  CashierOilItemLeft({
    super.key,
    required this.item,
    required this.index,
    required this.onTapMenu,
    required this.onTapItemClick,
    required this.heroTag,
  });

  final AppOrderBean item;
  final int index;
  final VoidCallback onTapMenu;
  final VoidCallback onTapItemClick;
  final String heroTag;

  final CashierPageProvider mProvider = Get.find<CashierPageProvider>();

  @override
  Widget build(BuildContext context) {
    return Obx(() => Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            if (mProvider.isSecondOil(item)) Gaps.empty,
            if (!mProvider.isSecondOil(item))
              GestureDetector(
                onTap: () => onTapItemClick(),
                child: Container(
                  margin: mProvider.isFirstOil(item) ? null : const EdgeInsets.only(left: 3.0, right: 3.0),
                  decoration: BoxDecoration(
                    color: _getItemBackgroundColor(mProvider.isFirstOil(item)),
                    borderRadius: const BorderRadius.all(Radius.circular(3)),
                  ),
                  child: _buildStackContent(context, item),
                ),
              ),
            if (!mProvider.isSecondOil(item)) Container(height: 5, color: Colours.grey),
          ],
        ));
  }

  // 获取item的背景色
  Color _getItemBackgroundColor(bool isSelected) {
    if (isSelected) {
      return Colours.blue13345F;
    }
    if (item.energyOrderStatus < OrderOilStatus.DONE) {
      return Colours.blue4B7EFE;
    }
    return Colours.greyF2F4F8;
  }

  // 获取item的字体颜色
  Color _getItemTextColor(AppOrderBean bean) {
    if (mProvider.selectListOils.contains(bean)) {
      return Colours.white;
    }
    if (bean.energyOrderStatus < OrderOilStatus.DONE) {
      return Colours.white;
    }
    return Colours.text;
  }

  // 构建item
  Widget _buildStackContent(BuildContext context, AppOrderBean bean) {
    final isEven = mProvider.isSelectedTwoOil() && mProvider.isFirstOil(bean);
    return Stack(
      alignment: Alignment.center,
      children: [
        // 上下紧密贴合的布局
        Column(
          children: [
            _buildStackContentTest(context, item),
            if (isEven) Container(height: 5, color: Colours.grey),
            if (isEven) _buildStackContentTest(context, mProvider.selectListOils[1]),
          ],
        ),
        // 中间蓝色爱心图形，叠加在整体中心位置
        if (isEven) SvgPicture.asset(Assets.homeSvgOilConnect, width: 25, height: 25),
      ],
    );
  }

  Widget _buildStackContentTest(BuildContext context, AppOrderBean bean) {
    return SizedBox(
        width: double.infinity,
        height: 110,
        child: Stack(
          children: <Widget>[
            // 左侧文字
            Positioned(
              left: 8,
              top: 8,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  // 枪号+油品
                  Row(
                    // 水平方向居中对齐
                    mainAxisAlignment: MainAxisAlignment.start,
                    // 垂直方向基于基线对齐
                    crossAxisAlignment: CrossAxisAlignment.baseline,
                    // 指定使用字母基线
                    textBaseline: TextBaseline.alphabetic,
                    children: [
                      // “01”
                      Text(
                        bean.nzl.toString().padLeft(2, '0'),
                        style: TextStyle(
                          fontSize: Dimens.font_sp18,
                          fontWeight: FontWeight.bold,
                          color: _getItemTextColor(bean),
                        ),
                      ),
                      // “95#”
                      Text(
                        '/${bean.mchGoodsName}${bean.fccTTC}',
                        // '/${bean.mchGoodsName}',
                        style: TextStyle(
                          fontSize: Dimens.font_sp16,
                          color: _getItemTextColor(bean),
                        ),
                      ),
                    ],
                  ),
                  Gaps.vGap4,
                  Row(
                    children: <Widget>[
                      Visibility(
                        // 默认为占位替换，类似于gone
                        visible: bean.formatExceptionType.isNotEmpty,
                        child: _GoodsItemTag(
                          text: '价格异常',
                          color: Theme.of(context).colorScheme.error,
                        ),
                      ),
                      Opacity(
                        // 修改透明度实现隐藏，类似于invisible
                        opacity: (bean.isSynced) ? 0 : 1.0,
                        child: _GoodsItemTag(
                          text: '待上传',
                          color: Theme.of(context).primaryColor,
                        ),
                      )
                    ],
                  ),
                ],
              ),
            ),
            // 右侧操作 + 文字
            Positioned(
              right: 0,
              top: 0,
              child: Semantics(
                /// container属性为true，防止上方ExcludeSemantics去除此处语义
                container: true,
                label: '商品操作菜单',
                child: GestureDetector(
                  onTap: onTapMenu,
                  child: Container(
                    key: Key('goods_menu_item_${bean.energyOrderCode}'),
                    width: 64.0,
                    height: 44.0,
                    // color: Colors.red,
                    padding: const EdgeInsets.only(left: 20.0, bottom: 10.0, top: 10.0, right: 10.0),
                    child: const Icon(Icons.more_horiz, color: Colors.white),
                  ),
                ),
              ),
            ),
            // 订单时间
            Positioned(
              left: 8,
              bottom: 12,
              child: Text(
                bean.orderTime.replaceFirst(' ', '\n'),
                // style: Theme.of(context).textTheme.titleSmall,
                style: TextStyle(
                  fontSize: Dimens.font_sp12,
                  // fontWeight: FontWeight.bold,
                  color: _getItemTextColor(bean),
                ),
              ),
            ),
            // 订单金额
            Positioned(
              right: 8,
              bottom: 8,
              child: Row(
                // 水平方向居中对齐
                mainAxisAlignment: MainAxisAlignment.start,
                // 垂直方向基于基线对齐
                crossAxisAlignment: CrossAxisAlignment.baseline,
                // 指定使用字母基线
                textBaseline: TextBaseline.alphabetic,
                children: [
                  // “01”
                  Text(
                    bean.mny.toYuan,
                    style: TextStyle(
                      fontSize: Dimens.font_sp24,
                      fontWeight: FontWeight.bold,
                      color: _getItemTextColor(bean),
                    ),
                  ),
                  // “95#”
                  Text(
                    '元/${bean.vol.toYuan}L',
                    style: TextStyle(
                      fontSize: Dimens.font_sp16,
                      color: _getItemTextColor(bean),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ));
  }
}

class _GoodsItemTag extends StatelessWidget {
  const _GoodsItemTag({
    required this.color,
    required this.text,
  });

  final Color? color;
  final String text;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 4.0, vertical: 3.0),
      // margin: const EdgeInsets.only(right: 6.0),
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(2.0),
      ),
      // height: 16.0,
      alignment: Alignment.center,
      child: Text(
        text,
        style: TextStyle(
          color: Colors.white,
          fontSize: Dimens.font_sp12,
          height: Device.isAndroid ? 1.1 : null,
        ),
      ),
    );
  }
}
